<template>
   <div class="common-table">
      <!-- 表格组件 -->
      <el-table :data="tableData" height="90%" stripe>
         <!-- 每位用户的详细信息 -->
         <el-table-column show-overflow-tooltip v-for="item in tableLabel" :key="item.prop" :label="item.label"
            :width="item.width ? item.width : 125">
            <template slot-scope="scope">
               <span style="margin-left: 10px;">{{ scope.row[item.prop] }}</span>
            </template>
         </el-table-column>

         <!-- 每一行末尾的操作功能 -->
         <el-table-column label="操作" min-width="180">
            <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
               <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>

         </el-table-column>
      </el-table>

      <!-- 底下分页组件 -->
      <el-pagination class="pager" layout="prev,pager,next" :total="config.total" :current-page.sync="config.page"
         @current-change="changePage" :page-size="20">
      </el-pagination>
   </div>
</template>

<script>
export default {
   name: "CommonTable",
   props: {
      tableData: Array,
      tableLabel: Array,
      config: Object
   },
   data() {
      return {};
   },
   methods: {
      handleEdit(row) {
         this.$emit('edit', row)
      },
      handleDelete(row) {
         this.$emit('del', row)
      },
      changePage(page) {
         this.$emit('changePage', page)
      }
   },
};
</script>

<style lang="less" scoped>
.common-table {
   height: calc(100% - 62px);
   background-color: #fff;
   position: relative;

   .pager {
      position: absolute;
      bottom: 0;
      right: 20px;
   }
}

// .common-table {
//    height: calc(100% - 62px);
//    background-color: #fff;
//    position: relative;

//    .pager {
//       position: absolute;
//       bottom: 0;
//       right: 20px;
//    }
// }
</style>